<!-- 记录身高 -->
<template>
<div class="container_height">
    <van-button v-show="showBack" icon="arrow-left" color="#888" plain style="border:none;" @click="$router.go(-1)">返回</van-button>
    <div class="round">
        <div style="font-size:2.5rem;font-weight: bold;">{{ showVal }}</div>
        <div style="padding-top: 0.375rem;font-size: 1.25rem;">cm</div>
    </div>
    <!-- 选择身高 -->
    <van-picker title="身高" :columns="columns" @change="heightChange" />
    <!-- 按钮 -->
    <div class="btn" @click="submitHeight">更新身高</div>
</div>
</template>

<script>
import {
    apiRequest
} from '../../assets/js/axios_api'
// import $http from '../../assets/js/axios_api'
export default {
    metaInfo() {
        return {
            title: '更新身高'
        }
    },
    name: 'RecHeight',
    data() {
        return {
            showVal: '',
            height: '',
            userInfo: {},
            columns: [],
            showBack: false,
            fromPath: '',
        }
    },
    components: {

    },
    mounted() {
        console.log(this.fromPath)
        this.showBack = this.fromPath == 'BaseInfo'; //从个人信息页面进入记录身高，则展示返回按钮，可返回。第一次登录身高必录，无返回按钮。

        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.height = this.userInfo.height;
        this.showVal = (this.height&&this.height.toString()) || '160';
        let firIndex = parseInt(this.showVal.split('')[0]) - 1;
        let secIndex = parseInt(this.showVal.split('')[1]);
        let thiIndex = parseInt(this.showVal.split('')[2]);
        this.columns = [
            // 第一列
            {
                values: [1, 2],
                defaultIndex: firIndex,
            },
            // 第二列
            {
                values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                defaultIndex: secIndex,
            },
            // 第三列
            {
                values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                defaultIndex: thiIndex,
            },
        ]
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.fromPath = from.name || ''
        })
    },
    methods: {
        heightChange(picker, vals, index) {
            this.showVal = vals.join('')
        },
        submitHeight() {
            this.userInfo.height = this.showVal;
            let param = {
                "cusId": this.userInfo.cusId,
                "height": this.userInfo.height,
            }
            apiRequest(this, 'hmcustomer', param, resData => {
                if (this.userInfo.weight) {
                    this.userInfo.bmi = parseFloat(this.userInfo.weight / ((this.userInfo.height / 100) * (this.userInfo.height / 100))).toFixed(2);
                }
                sessionStorage.setItem('userInfo', JSON.stringify(this.userInfo));
                if (this.showBack) {
                    this.$router.push('/baseinfo')
                } else {
                    this.$router.push('/recweight')
                }

            }, 'put')
        }

    }
}
</script>

<style lang="less">
@import '../../assets/css/common.less';

.container_height {
    .round {
        width: 10rem;
        height: 7.5rem;
        border-radius: 12.5rem;
        text-align: center;
        background: linear-gradient(to top, @lightOrange-color, @mdOrange-color);
        margin: 4.375rem auto;
        padding-top: 2.5rem;
        color: #666;
    }

    .btn {
        text-align: center;
        background-color: @orange-color;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1.25rem 0;
        color: #fff;
    }

    .van-picker__columns,
    .van-picker-column {
        background-color: @lightOrange-color  !important;
    }
}
</style>
